<template>
  <el-dialog
    title="设置菜单权限"
    :close-on-click-modal="false"
    class="abow_dialog"
    width="60%"
    :visible.sync="visible"
  >
    <vxe-table
      ref="xTree"
      resizable
      row-id="Id"
      border="inner"
      keep-source
      :tree-config="{children: 'Children', accordion: true, line: true}"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :data="dataObj.tableData"
    >
      <vxe-table-column field="Name" title="名称" tree-node />
      <vxe-table-column field="Type" title="类型" :edit-render="{name: 'ElSelect', options: typelist}" />
    </vxe-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="dataFormSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getMenusData, updateRoleMenu } from '@/api/role'
export default {
  data() {
    return {
      visible: false,
      typelist: [],
      dataObj: {
        tableData: [],
        RoleId: 0
      }
    }
  },
  created() {
    this.typelist = this.findOptions()
  },
  methods: {
    findOptions() {
      return [{
        'label': '个人',
        'value': 'Private'
      }, {
        'label': '部门',
        'value': 'Dept.'
      }, {
        'lable': '所有',
        'value': 'ALL'
      }]
    },
    init(id, code) {
      this.visible = true
      this.dataObj.RoleId = id
      getMenusData(code).then(({ data }) => {
        this.dataObj.tableData = data
      })
    },
    dataFormSubmit() {
      const permission = updateRoleMenu(this.$refs.xTree.getUpdateRecords())
      permission.then((data) => {
        if (data && data.code === '20000') {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>
